<template>
  <div>
    <!-- 导航栏开始 -->
    <van-sticky>
      <van-nav-bar class="nav-bar" title="全民医典" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>

    <!-- 导航栏结束 -->
    <!-- 主体内容开始 -->
    <div class="content">
      <!-- 标题 -->
      <div class="tit">
        <h2>{{ know.n_title }}</h2>
      </div>
      <!-- 医师简介开始 -->
      <div class="message">
        <div class="xinx">
          <!-- 头像 -->
          <img src="../../assets/icon/touxiang.jpeg" />
          <!-- 医师信息开始 -->
          <div class="doc">
            <span class="sp">平台信息管理员</span>
          </div>
          <!-- 医师信息结束 -->
        </div>

        <!-- 关注 -->
        <van-button class="btn" type="primary" :text="guanz ? '关注' : '已关注'" @click="() => (guanz = !guanz)"></van-button>
      </div>
      <!-- 医师简介结束 -->
      <!-- 内容 -->
      <div class="del">
        <div class="image">
          <img :src="know.n_img" alt="" />
        </div>
        <span class="det">{{ know.n_details }}</span>
        <span>{{ know.n_time }}</span>
      </div>

      <!-- 宫格收藏分享 -->
      <van-grid>
        <!-- 点赞收藏功能 -->
        <van-grid-item class="grid" @click="() => iszan = !iszan">
          <img :src="require(`../../assets/icon/dianzan_${iszan ? 0 : 1}.jpg`)" />
          <span>有帮助</span>
        </van-grid-item>
        <van-grid-item class="grid" @click="() => collect = !collect">
          <img :src="require(`../../assets/icon/shoucang_${collect ? 0 : 1}.jpeg`)" />
          <span>收藏</span>
        </van-grid-item>

        <van-grid-item icon="browsing-history-o" text="去问诊" to="/consultation" />
        <van-grid-item size="3rem" @click="showShare = true" icon-color="#198c46" icon="wechat" text="分享" />
      </van-grid>
      <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />

      <div style="height: 50px"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import Know from "@/type/Know";
import httpApi from "@/http";
import { showDialog } from "vant";

const router = useRouter();
const route = useRoute(); //当前路由对象
console.log(route);
// 接收路径id 描述新闻id
const n_id = route.params.id;
const know = ref<Know>({});
onMounted(() => {
  // 加载知识详情
  console.log(n_id);
  httpApi.healthApi.queryById({ n_id }).then((res) => {
    console.log("新闻详情", res);

    know.value = res.data.data[0];
  });
});

// 返回上一级
const onClickLeft = () => history.back();

// 点赞
let iszan = ref(true);

// 点击图标收藏
let collect = ref(true)

// 关注
let guanz = ref(true);



// 分享
const showShare = ref(false);
const options = [
  { name: "微信", icon: "wechat" },
  { name: "微博", icon: "weibo" },
  { name: "复制链接", icon: "link" },
  { name: "分享海报", icon: "poster" },
  { name: "二维码", icon: "qrcode" },
];
</script>

<style scoped>
.nav-bar {
  background-color: #86b4ec;
  color: azure;
}

.tit>h2 {
  text-align: left;
  margin: 0;
}

.content {
  margin: 0 10px;
}

.message {
  display: flex;
  max-height: 50px;
  justify-content: space-between;
}

.message>.xinx {
  display: flex;
  max-height: 50px;
}

.message img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.message .btn {
  margin-left: 15px;
}

.doc {
  text-align: left;
  font-size: 16px;
  height: 40px;
}

.doc .sp {
  color: #909092;
  line-height: 40px;
}

.del {
  margin-top: 20px;
  text-align: left;
  color: #5b5b5b;
  widows: 750rpx;
  display: flex;
  flex-direction: column;
}

.del>.image {
  width: 100%;
  margin: 5px 0;
  padding: 0 5px;
  overflow: hidden;
  box-sizing: border-box;
}

.del>.image img {
  width: 100%;
}

.del>span {
  margin-bottom: 10px;
}

.del .det {
  text-indent: 2em;
  line-height: 20px;
  letter-spacing: 1px;
  white-space: pre-wrap;
}

.grid {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.grid img {
  width: 28px;
  height: 28px;
}

.grid span {
  font-size: 12px;
  padding-top: 4px;
  margin-top: 8px;
  color: #323233;
}
</style>
